<template>
  <div>
    <img class="logo" src="@/assets/logo.png">
    <el-card class="login-form-layout">
      <el-form
        label-position="left"
      >
        <h3 class="title">账号密码登录</h3>
        <el-form-item prop="username">
          <el-input
            name="username"
            type="text"
            autocomplete="off"
            placeholder="请输入用户名"
            v-model="loginParams.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            name="password"
            autocomplete="off"
            placeholder="请输入密码"
            type="password"
            @keyup.enter="login"
            v-model="loginParams.password"
          >
          </el-input>
        </el-form-item>
        <el-button type="text" class="phoneLogin">手机号登录</el-button>
        <el-form-item>
          <el-button
            class="button"
            plain="true"
            type="primary"
            :loading="loading"
            @click="login">登录
          </el-button>
        </el-form-item>
        <el-button type="text" class="register"
        @click="register">注册账号</el-button>
        <el-button type="text" class="findBack">找回密码</el-button>
        <img class="QRCode" src="@/assets/QRCode.png">
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" src="./login.ts"></script>

<style scoped>
.logo{
  position: absolute;
  left: 0;
  right: 0;
  width: 75px;
  margin: 145px 595px 10px;
  z-index:999;
}
.QRCode{
  position: absolute;
  left: 0;
  right: 0;
  width: 30px;
  margin: -25px 335px;
}
.button{
  width: 250px;
  height: 0px;
  margin: 20px;
  background: #003399;
  color: aliceblue;
}
.phoneLogin{
  position: absolute;
  margin: -20px -200px 0px 110px;
  color: #003399;
  font-size: 3px;
}
.register{
  position: absolute;
  margin: -30px 100px 0px -170px;
  color: #003399;
  font-size: 3px;
}
.findBack{
  position: absolute;
  margin: -30px 0px 0px -100px;
  color: #003399;
  font-size: 3px;
}
.login-form-layout {
  position: absolute;
  left: 0;
  right: 0;
  width: 390px;
  height: 330px;
  margin: 140px auto;
  border-top: 45px solid #003399;
  z-index: -1;
}
</style>
